<script setup lang="ts">
import { onMounted, reactive, ref, computed } from "vue";
import { tableBorder } from "@/utils/border/table-border.ts";
import { Message, PaginationProps } from "@arco-design/web-vue";
import type { newsListType } from "@/types/newsType";
import useModal from "@/hooks/useModal.ts";
import { getNewsList, delNews, editNews } from "@/services/newsApi";
const { ModalShow, ModalHide } = useModal();

const drawer = ref<{
  showDialog: () => {};
  hideDialog: () => {};
}>();
const visible = ref(false);
const props = defineProps({
  dataType: String,
});
const data = ref<newsListType[]>([]);

const newsContent = ref<{
  show: () => void;
  edit: (data: newsListType) => void;
}>();

const pagination = reactive<PaginationProps>({
  total: 0,
  current: 1,
  showTotal: true,
  pageSize: 10,
});

const formSearch = reactive({
  current: 1,
  size: 10,
  type: props.dataType,
});

function queryData() {
  // data.value = [];
  getNewsList(formSearch)
    .then((res) => {
      if (res.code === 200) {
        data.value = res.data.records;
        pagination.total = res.data.total;
        pagination.current = res.data.current;
        pagination.pageSize = res.data.size;
      } else {
        Message.warning(res.msg);
      }
    })
    .catch((err) => {
      Message.error(err.msg);
    });
}

const handleCancel = () => {
  drawer.value?.hideDialog();
};

// 添加
const handleAdd = () => {
  options.title = "添加赛事信息";
  newsContent.value?.show();
};

// 修改
const handleEdit = (row: newsListType) => {
  options.title = "编辑赛事信息";
  newsContent.value?.edit(row);
};

const info = reactive({
  title: "",
  content: "",
});

// 详情
const handleInfo = (row: newsListType) => {
  info.title = row.title;
  info.content = row.content;
  options.title = "查看赛事信息";
  visible.value = true;
};
const handleClose = () => {
  visible.value = false;
};

const publish = (row) => {
  ModalShow({
    content: "您确认要发布这条信息吗？",
  }).then(() => {
    row.status = 1;
    editNews(row).then((res) => {
      if (res.code === 200) {
        ModalHide();
        Message.success("发布成功");
        queryData();
      } else {
        Message.warning(res.msg);
        ModalHide();
      }
    });
  });
};
// 删除
const handleDelete = (row: newsListType) => {
  ModalShow({
    content: "您确认要删除这条信息吗？",
  }).then(() => {
    delNews(row.id).then((res) => {
      if (res.code === 200) {
        if (data.value.length === 1) {
          formSearch.current = formSearch.current - 1;
        }
        queryData();
        ModalHide();
        Message.success("删除成功");
      } else {
        Message.warning(res.msg);
        ModalHide();
      }
    });
  });
};

const handlePageChange = (page: number) => {
  formSearch.current = page;
  queryData();
};

onMounted(() => {
  queryData();
});

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: 80,
    slotName: "index",
  },
  {
    title: "标题",
    dataIndex: "title",
    width: 250,
  },
  {
    title: "状态",
    slotName: "status",
    width: 80,
  },
  {
    title: "浏览次数",
    dataIndex: "browseCount",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    width: 180,
  },
  {
    title: "发布时间",
    dataIndex: "releaseTime",
    width: 180,
  },
  {
    title: "操作",
    slotName: "operate",
    width: 160,
  },
];

function getStatusString(dataType: 0 | 1 | 2) {
  if (dataType === 0) {
    return "赛事通知";
  }
  if (dataType === 1) {
    return "赛程安排";
  }
  if (dataType === 2) {
    return "赛事新闻";
  }
}
const getColor = (dataType: 0 | 1 | 2) => {
  switch (dataType) {
    case 0:
      return "#0fc6c2";
    case 1:
      return "#ffb400";
    case 2:
      return "#00b42a";
  }
};

function getStatusString2(status: 0 | 1) {
  if (status === 0) {
    return "草稿";
  }
  if (status === 1) {
    return "发布";
  }
}

const getColor2 = (status: 0 | 1) => {
  // 根据状态返回不同的颜色
  switch (status) {
    case 0:
      return "#8c8c8c";
    case 1:
      return "#00b42a";
  }
};

const options = reactive({
  title: "",
});
</script>

<template>
  <a-space
    class="container"
    direction="vertical"
  >
    <a-card>
      <div class="tabletools">
        <a-space>
          <a-button
            type="primary"
            @click="handleAdd"
          >
            <template #icon>
              <icon-plus />
            </template>
            <span>新增</span>
          </a-button>
        </a-space>
      </div>

      <a-table
        style="user-select: none;"
        :data="data"
        :columns="columns"
        :bordered="tableBorder"
        :pagination="pagination"
        @page-change="handlePageChange"
      >
        <template #index="{rowIndex}">
          {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
        </template>

        <template #dataType="{ record }">
          <a-tag :color="getColor(record.dataType)">{{ getStatusString(record.dataType) }}</a-tag>
        </template>

        <template #status="{ record }">
          <a-tag :color="getColor2(record.status)">{{ getStatusString2(record.status) }}</a-tag>
        </template>

        <template #operate="{ record }">
          <a-space>
            <a-button
              type="primary"
              @click="handleEdit(record)"
            >编辑</a-button>
            <a-button
              type="primary"
              status="warning"
              @click="handleInfo(record)"
            >详情</a-button>
            <a-button
              type="primary"
              status="danger"
              @click="handleDelete(record)"
            >删除</a-button>
            <a-button
              type="primary"
              status="warning"
              @click="publish(record)"
              :disabled="record.status === 1 ? true : false"
            >发布</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>

  </a-space>

  <news-content-form
    ref="newsContent"
    :title="options.title"
    :dataType=props.dataType
    @list="queryData"
  />

  <a-modal
    :width="800"
    :closable="false"
    @cancel="handleCancel"
    v-model:visible="visible"
    ref="drawer"
  >
    <div>
      <div class="title">
        {{ info.title }}
      </div>
      <div style="height: 500px;overflow: hidden;">
        <div style="height: 100%;overflow: auto;">
          <p v-html="info.content"></p>
        </div>
      </div>
    </div>

    <template #footer>
      <a-button @click="handleClose">
        关闭
      </a-button>
    </template>
  </a-modal>
</template>

<style scoped lang="scss">
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
</style>